<template>
  <view class="ops">
    <tabTopBar
      :title="$t('page.operation.maintenance.title')"
      isOpenLeftSolt
      :isOpenRightSolt="true"
      :bgColor="'#132034'"
    >
      <template #right-content>
        <image
          src="/static/ops-plus.png"
          class="ops-add"
          @tap="$u.route('/pages/ops/create')"
        />
      </template>
    </tabTopBar>
    <up-tabs :list="tabs" @change="handleTabChanged"></up-tabs>
    <view class="message-list">
      <view
        v-for="item in dataList"
        :key="item.id"
        class="message-item"
        @tap="handleDetail(item)"
      >
        <view class="message-item__header">
          <text class="message-item__header-title">{{ item.siteName }}</text>
        </view>
        <view class="message-item__content">
          <text>{{ $t("ops.list.item.cell-1") }}{{ item.id }}</text>
          <text>{{ $t("ops.list.item.cell-2") }}{{ item.content }}</text>
        </view>
        <view class="message-item__footer">
          <view class="message-item__create-time">
            <text>{{ dateParse(item.createTime) }}</text>
          </view>
          <view
            class="message-item__status"
            :style="{ backgroundColor: item.bgColor }"
          >
            <text
              class="message-item__status-label"
              :style="{ color: item.color }"
              >{{ $t(item.label) }}</text
            >
          </view>
        </view>
      </view>
      <empty v-if="isEmpty"></empty>
      <up-loadmore
        v-else
        marginTop="24"
        :status="loadMoreStatus"
        :nomore-text="$t('network.noDataOfMore')"
        :loading-text="$t('common.loadingText')"
        color="#9e9e9e"
        lineColor="#9e9e9e"
        dashed
        :line="loadMoreStatus == 'nomore'"
      />
    </view>
    <tabBar></tabBar>
  </view>
</template>

<script setup>
import dayjs from "dayjs";
import { computed, ref, watch } from "vue";
import { useI18n } from "vue-i18n";
import { StatusFilterTabs, StatusTypesMap } from "@/composable/constant/ops.js";
import useRefreshablePagination from "@/composable/hooks/useRefreshablePagination.js";
import { selectOperateList } from "../../apis/components/operate";
import { useAppStore } from "@/store/app";

const { t } = useI18n();

const tabs = computed(() =>
  StatusFilterTabs.map((item) => ({
    name: t(item.name),
    value: item.value,
  }))
);
const status = ref(tabs.value[0].value);

const dateParse = (value) => dayjs(value).format(t("common.time.format"));
const handleDetail = (item) => uni.$u.route(`/pages/ops/detail?id=${item.id}`);

const fetchData = async (page, pageSize) => {
  const { records } = await selectOperateList(status.value, page, pageSize);
  return {
    data: (records || []).map((item) => {
      const config = StatusTypesMap[Number(item.status)];
      item.label = config.name;
      item.bgColor = config.bgColor;
      item.color = config.color;
      return item;
    }),
  };
};

const { dataList, refresh, isEmpty, loadMoreStatus } =
  useRefreshablePagination(fetchData);

const handleTabChanged = ({ value }) => {
  status.value = value;
  refresh();
};
const appStore = useAppStore();

watch(
  () => appStore.userId,
  () => {
    refresh();
  }
);
</script>

<style lang="scss" scoped>
.ops {
  overflow-x: hidden;
  &-add {
    width: 36rpx;
    height: 36rpx;
  }

  :deep(.u-tabs) {
    background-color: #132034;
    padding: 19rpx 0;

    .u-tabs__wrapper__nav {
      padding: 0 32rpx;
    }

    .u-tabs__wrapper__nav__item {
      padding: 0 20rpx;
      border-radius: 28rpx;
      height: 56rpx !important;

      &:not(:last-child) {
        margin-right: 28rpx;
      }
    }

    .u-tabs__wrapper__nav__item__text {
      color: #fff !important;
    }

    .u-tabs__wrapper__nav__item-active {
      background-color: #64b7f6;
    }

    .u-tabs__wrapper__nav__line {
      display: none;
    }
  }

  .message-list {
    padding: 24rpx 32rpx;
  }

  .message-item {
    border-radius: 16rpx;
    background-color: #132034;
    padding: 37rpx 32rpx 28rpx;

    &:not(:last-child) {
      margin-bottom: 24rpx;
    }

    &__header {
      margin-bottom: 30rpx;

      &-title {
        // font-family: PingFang;
        font-size: 32rpx;
        line-height: 1;
        color: #eeeeee;
      }
    }

    &__content {
      @include flex(column);
      margin-bottom: 24rpx;

      text {
        font-family: PingFang;
        font-size: 28rpx;
        color: #999999;

        &:not(:last-child) {
          margin-bottom: 7rpx;
        }
      }
    }

    &__footer {
      @include flex(row);
      justify-content: space-between;
    }

    &__create-time {
      padding: 13rpx 26rpx;
      border-radius: 99999px;
      background-color: #222d49;

      text {
        // font-family: PingFang SC Medium;
        font-size: 24rpx;
        line-height: 1;
        color: #999999;
      }
    }

    &__status {
      padding: 13rpx 22rpx;
      border-radius: 99999px;
      background-color: rgba(100, 183, 246, 0.16);
      color: rgba(100, 183, 246, 1);

      &-label {
        // font-family: PingFang SC Bold;
        font-size: 24rpx;
        line-height: 1;
      }
    }
  }
}
</style>
